<template>
  <div class="hospital-detail pad">
    <div class="head">
      <span>{{name}}</span>
    </div>
    <el-button type="primary" @click="openAddDialog">添加量表</el-button>
    <el-table class="m-t-b" :data="hospitalChartList" border stripe v-loading="tableLoading">
      <el-table-column label="量表名称" prop="psychologyTitle"></el-table-column>
      <el-table-column label="量表来源" prop="psychologyName"></el-table-column>
      <el-table-column label="量表类型">
        <template slot-scope="scope">
          {{scope.row.type == 0 ? '非HIS' : 'HIS'}}
        </template>
      </el-table-column>
      <el-table-column label="量表种类">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.pyschologyType == 2">初筛表</el-tag>
          <el-tag type="success" v-else>基础量表</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="量表价格">
        <template slot-scope="scope">
          {{scope.row.headlinePrice}}元
        </template>
      </el-table-column>
      <el-table-column label="医院规定价格">
        <template slot-scope="scope">
          {{scope.row.valorize}}元
        </template>
      </el-table-column>
      <el-table-column label="分佣比例">
        <template slot-scope="scope">
          {{scope.row.centCommission}}%
        </template>
      </el-table-column>
      <el-table-column label="禁用/启用" width="150">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isEnable"
            active-text="启用"
            inactive-text="禁用"
            @change="changeStatus($event, scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="openUpdateDialog(scope.row)">修改</el-button>
          <el-button type="danger" @click="deleteChart(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-dialog :title="dialogTitle" :visible.sync="showDialog">
      <el-form ref="hospitalChart" :model="hospitalChart" :rules="rules">
        <el-form-item label="量表类型">
          <el-select v-model="chartType" @change="changeChartType" :disabled="dialogTitle == '修改量表'">
            <el-option label="初筛表" :value="2"></el-option>
            <el-option label="基础量表" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="心理量表" prop="psychologyTitleId">
          <el-select v-model="hospitalChart.psychologyTitleId" :disabled="dialogTitle == '修改量表'">
            <el-option
              v-for="(item, i) in chartList"
              :key="i"
              :label="item.psychologyTitle"
              :value="item.psychologyTitleId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="量表价格" prop="headlinePrice">
          <el-input type="number" v-model="hospitalChart.headlinePrice" :disabled="dialogTitle == '修改量表'" />
        </el-form-item>

        <el-form-item label="医院规定价格" prop="valorize">
          <el-input type="number" v-model="hospitalChart.valorize" />
        </el-form-item>

        <el-form-item label="分佣比例(%)" prop="centCommission">
          <el-input type="number" v-model="hospitalChart.centCommission" />
        </el-form-item>

        <el-form-item label="类型">
          <el-select v-model="hospitalChart.type" :disabled="dialogTitle == '修改量表'">
            <el-option label="HIS" :value="1"></el-option>
            <el-option label="非HIS" :value="0"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取 消</el-button>
        <el-button type="primary" @click="fetchAddHospitalChart('hospitalChart')" :loading="isDong">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAllMentalList,
  addHospitalChart,
  updateHospitalChart,
  deleteHospitalChart,
  getHospitalList,
  changeHospitalChartStatus
} from '../api/knowledge';
export default {
  name: 'HospitalDetail',
  props: ['id', 'name'],
  data () {
    return {
      chartType: 2,
      isDong: false,
      tableLoading: false,
      showDialog: false,
      dialogTitle: '添加量表',
      hospitalChart: {
        hospitalId: "", // 医院id
        psychologyTitleId: "", // 心理标题ID
        headlinePrice: "", // 标题价格
        valorize: "", // 医院规定价格
        centCommission: "", // 分佣比例(百分比)
        type: 0 // 类型(0非HIS，1HIS)
      },
      hospitalChartList: [],
      chartList: [],
      firstList: [], // 初筛表
      secondList: [], // 基础量表
      chartLoading: false,
      curChartId: '',
      rules: {
        headlinePrice: [
          { required: true, message: '心理价格不能为空', trigger: 'change' }
        ],
        valorize: [
          { required: true, message: '医院规定价格不能为空', trigger: 'change' }
        ],
        centCommission: [
          { required: true, message: '分佣比例不能为空', trigger: 'change' }
        ],
        psychologyTitleId: [
          { required: true, message: '请选择心理量表', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    openAddDialog () { // 打开添加量表弹出框
      this.dialogTitle = '添加量表';
      this.hospitalChart.psychologyTitleId = '';
      this.hospitalChart.headlinePrice = '';
      this.hospitalChart.valorize = '';
      this.hospitalChart.centCommission = '';
      this.hospitalChart.type = 0;
      this.showDialog = true
    },
    hideDialog () { // 隐藏弹出框
      this.showDialog = false
    },
    fetchAddHospitalChart (name) { // 添加医院量表
      const _this = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          console.log(this.hospitalChart)
          this.isDong = true;
          if (this.dialogTitle === '添加量表') { // 添加量表
            addHospitalChart(this.hospitalChart)
            .then(res => {
              if (res.data.code === 1) {
                this.$message.success('添加成功');
                this.showDialog = false;
                this.fetchHospitalChart()
              } else {
                this.$message.error(res.data.msg || '服务异常!')
              };
              this.isDong = false
            })
            .catch(e => {
              this.isDong = false;
              this.$message.error('服务异常')
            })
          } else { // 更新
            updateHospitalChart({
              valorize: this.hospitalChart.valorize,
              centCommission: this.hospitalChart.centCommission,
              hospitalPsychologyId: this.curChartId
            })
            .then(res => {
              if (res.data.code === 1) {
                this.$message.success('更新成功');
                this.showDialog = false;
                this.fetchHospitalChart()
              } else {
                this.$message.error(res.data.msg || '服务异常!')
              };
              this.isDong = false
            })
            .catch(e => {
              this.isDong = false;
              this.$message.error('服务异常!')
            })
          }
        } else {
          return false
        }
      })
    },
    fetchMentalList (type) { // 获取心理列表
      this.chartLoading = true;
      getAllMentalList(type)
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data || [];
          this[type === 2 ? 'firstList' : 'secondList'] = list;
          console.log(list)
          this.chartList = list
        } else {

        };
        this.chartLoading = false
      })
      .catch(e => {
        this.chartLoading = false
      })
    },
    changeChartType (e) { // 切换量表类型
      this.hospitalChart.psychologyTitleId = '';
      if (e === 2) {
        if (this.firstList.length) {
          this.chartList = this.firstList;
          return
        };
        this.fetchMentalList(2)
      } else if (e === 3) {
        if (this.secondList.length) {
          this.chartList = this.secondList;
          return
        };
        this.fetchMentalList(3)
      }
    },
    fetchHospitalChart () { // 查询医院量表列表
      this.tableLoading = true;
      getHospitalList(Number(this.id))
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data || [];
          list.forEach(item => {
            item.isEnable = Boolean(Number(item.enable))
          });
          this.hospitalChartList = list;
          console.log(list)
        } else {
          this.$message.error(res.data.msg || '服务异常!')
        };
        this.tableLoading = false
      })
      .catch(e => {
        this.tableLoading = false;
        this.$message.error('服务异常!')
      })
    },
    openUpdateDialog (chart) { // 打开更新弹出框
      console.log(chart)
      this.dialogTitle = '修改量表';
      this.curChartId = chart.hospitalPsychologyId;
      this.hospitalChart.psychologyTitleId = Number(chart.psychologyTitleId);
      this.hospitalChart.headlinePrice = Number(chart.headlinePrice);
      this.hospitalChart.valorize = Number(chart.valorize);
      this.hospitalChart.centCommission = Number(chart.centCommission);
      this.hospitalChart.type = Number(chart.type);
      this.showDialog = true
    },
    deleteChart (chart) { // 删除量表
      this.$confirm(`是否将量表${chart.psychologyTitle}移除?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(res => {
        deleteHospitalChart(chart.hospitalPsychologyId)
        .then(r => {
          if (r.data.code === 1) {
            this.$message.success('删除成功!');
            this.fetchHospitalChart()
          } else {
            this.$message.error(r.data.msg || '服务异常!')
          }
        })
        .catch(e => {
          this.$message.error('服务异常!')
        })
      })
      .catch(e => {
        console.log(e)
        this.$message.error('服务异常!')
      })
    },
    changeStatus (e, chart) { // 改变状态
      this.$confirm(`是否将量表${chart.psychologyTitle} ${e ? '启用' : '禁用'}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        changeHospitalChartStatus(chart.hospitalPsychologyId)
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success('操作成功!');
            this.fetchHospitalChart()
          } else {
            this.$message.error(res.data.msg || '服务异常!')
          }
        })
        .catch(e => {
          this.$message.error('服务异常!')
        })
      })
      .catch(er => {
        chart.isEnable = !e
      })
    },


  },
  created () {
    this.hospitalChart.hospitalId = Number(this.id);
    this.fetchMentalList(2); // 2: 初筛 3: 基础
    this.fetchHospitalChart()
  }
}
</script>
<style lang="scss">
  .hospital-detail {

  }
</style>

